import { behavior as computedBehavior }  from "miniprogram-computed";
import {
  isCellEmpty,
  FormatDateTime
} from "../../../../utils/util"

Component({
  behaviors: [computedBehavior],
  /**
   * 组件的属性列表
   */
  properties: {
    menuGroup: {
      type: Array,
      value: []
    },
    myMenuList: {
      type: Array,
      value: []
    },
    menuCountMap: {
      type: Object,
      value: {}
    }
  },

  computed: {
    myMenus(data) {
      const {
        editFlag,
        myMenuList,
        editMyMenuList
      } = data;

      if (editFlag) {
        return editMyMenuList;
      } else {
        return myMenuList;
      }
    },
    fixedMenuGroup(data) {
      const {
        menuGroup,
        myMenus,
        editFlag,
        menuCountMap,
        groupExpandMap
      } = data;

      const parseMenuGroup = JSON.parse(JSON.stringify(menuGroup));
      const result = parseMenuGroup.reduce((groupArray, groupItem) => {
        const groupObj = {
          ...groupItem
        }

        groupObj.menus = groupObj.menus.reduce((menuArray, menuItem) => {
          const isFind = myMenus.find(item => {
            return item.id === menuItem.id
          })

          if (!isFind) {
            const menuObj = {
              ...menuItem
            }

            if (!isCellEmpty(menuCountMap[menuItem.menuKey])) {
              menuObj.menuCount = menuCountMap[menuItem.menuKey];
            }

            menuArray.push(menuObj);
          }
          return menuArray;
        }, [])

        if (groupObj.menus && groupObj.menus.length > 0) {
          groupObj.isExpand = !groupExpandMap[groupObj.groupId] || editFlag;

          groupObj.menuHeight = groupObj.isExpand ? Math.ceil((groupObj.menus.length / 4)) * 166 - 2 : 166;

          groupArray.push(groupObj);
        }

        return groupArray;
      }, [])

      return result;
    },
    fixedMyMenus(data) {
      const {
        myMenus,
        menuCountMap,
      } = data;

      const parseMyMenus = JSON.parse(JSON.stringify(myMenus));

      return parseMyMenus.map(menuItem => {
        let menuCount = null;

        if (!isCellEmpty(menuCountMap[menuItem.menuKey])) {
          menuCount = menuCountMap[menuItem.menuKey];
        }

        return {
          ...menuItem,
          menuCount
        }
      })
    },
  },

  pageLifetimes: {
    hide() {
      this.handleCancelMyMenuEdit();
    }
  },

  lifetimes: {
    detached() {
      this.handleCancelMyMenuEdit();
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    editFlag: false,
    editMyMenuList: [],
    groupExpandMap: {},
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * @取消编辑我的常用菜单
     */
    handleCancelMyMenuEdit() {
      this.setData({
        editMyMenuList: [],
        editFlag: false
      })
    },

    /**
     * @编辑我的常用菜单
     */
    handleEditMyMenu() {
      this.setData({
        editMyMenuList: JSON.parse(JSON.stringify(this.data.myMenuList)),
        editFlag: true
      })
    },

    /**
     * @确认编辑我的常用菜单
     */
    handleConfirmMyMenuEdit: async function () {
      const editMyMenuList = this.data.editMyMenuList;

      this.triggerEvent("onSave", JSON.parse(JSON.stringify(editMyMenuList)));
    },

        /**
     * @添加单个我的常用菜单
     * @param {*} menu 
     */
    handleAddMyMenuItem(menu) {
      const editMyMenuList = this.data.editMyMenuList;

      editMyMenuList.push(menu);

      this.setData({
        editMyMenuList: JSON.parse(JSON.stringify(editMyMenuList))
      })
    },

    /**
     * @删除单个我的常用菜单
     * @param {*} menu 
     */
    handleDelMyMenuItem(menu) {
      const editMyMenuList = this.data.editMyMenuList;

      const findIndex = editMyMenuList.findIndex(item => {
        return item.id === menu.id
      })

      editMyMenuList.splice(findIndex, 1);

      this.setData({
        editMyMenuList: JSON.parse(JSON.stringify(editMyMenuList))
      })
    },

    /**
     * @收起展开我的菜单组
     * @param {*} e 
     */
    handleExpandMenuGroup(e) {
      const group = e.currentTarget.dataset.group;

      const groupExpandMap = this.data.groupExpandMap;

      groupExpandMap[group.groupId] = !groupExpandMap[group.groupId];

      this.setData({
        groupExpandMap
      })
    },

    /**
     * @点击菜单右上角图标
     * @param {*} e 
     */
    handleTipMenuMemo(e) {
      const menu = e.currentTarget.dataset.menu;

      this.triggerEvent("onTip", menu);
    },

    /**
     * @点击菜单
     */
    handleClickMenuItem(e) {
      const {
        type,
        menu
      } = e.currentTarget.dataset;

      const editFlag = this.data.editFlag;

      if (editFlag) {
        if (type === "my") {
          this.handleDelMyMenuItem(menu);
        } else {
          this.handleAddMyMenuItem(menu);
        }
      } else {
        this.triggerEvent("onItem", menu)
      }
    },
  }
})